<template>
  <div>
    <el-card class="box-card" style="height:800px">
      <div slot="header" class="clearfix">
        <span>
          <navigation />
        </span>
        <el-button
          size="small"
          style="float: right;"
          type="primary"
          @click="addPermiss"
          >添加</el-button
        >
      </div>
      <el-form :model="searchVo" class="serchBox" size="small" :inline="true">
        <el-form-item label="年份：">
          <el-date-picker
            class="userIntSize"
            v-model="searchVo.year"
            type="year"
            placeholder="选择年"
            value-format="yyyy"
            @change="searChangeYear"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="月份：">
          <el-select
            class="userIntSize"
            v-model="searchVo.quarter"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in quarterList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="责任单位：">
          <el-cascader
            class="userIntSize"
            v-model="searchVo.departmentId"
            :options="deptTypeListOne"
            :props="departmentProp"
            :show-all-levels="false"
            @change="changeFamily1"
            ref="departmenref"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="重点工作：">
          <el-cascader
            ref="taskRef"
            class="userIntSize"
            v-model="searchVo.taskId"
            :options="tasksList"
            :props="taskProp"
            :show-all-levels="false"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button @click="search" type="primary" size="small"
            >搜索</el-button
          >
          <el-button @click="reset" type="primary" size="small">重置</el-button>
        </el-form-item>
      </el-form>
      <el-scrollbar class="page-component__scroll" style="height:100%">
        <div style="height:620px;">
          <el-table
            :data="tableData"
            border
            height="620px"
            style="width: 100%"
            :header-cell-style="{ background: '#f5f5f5' }"
          >
            <el-table-column
              align="center"
              prop="quarter"
              label="日期"
              width="200"
            >
              <template slot-scope="scope">
                <span>{{scope.row.occurrenceTime}}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="provider"
              label="提供单位"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="taskName"
              label="重点工作"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="dname"
              label="责任单位"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="title"
              label="负面清单名称"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="nsName"
              label="清单来源"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="score"
              label="扣分值"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="description"
              label="描述"
            ></el-table-column>
            <el-table-column align="center" prop="file" label="附件">
              <template slot-scope="scope">
                <!-- <a v-if="scope.row.fileRout" :href="uploadUrl+'/'+scope.row.fileRout">{{fileLists(scope.row.fileRout)}}</a> -->
                <el-button @click="showfilesData(scope.row)" type="text"
                  >查看附件</el-button
                >
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="180">
              <template slot-scope="scope">
                <el-button @click="editPermiss(scope.row)" type="text"
                  >修改</el-button
                >
                <el-button @click="removePermiss(scope.row)" type="text"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-scrollbar>
      <el-pagination
        background
        style="float:right"
        layout="prev, pager, next"
        :page-size="pageSize"
        :current-page="currentPage"
        :total="total"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
      <!-- 弹框 -->
      <el-dialog
        width="550px"
        title="负面清单配置"
        :visible.sync="dialogFormVisible"
        :close-on-click-modaqingdal="false"
        @closed="closeDialog"
        top="20px"
      >
        <el-form
          label-width="95px"
          :model="dutyFrom"
          :hide-required-asterisk="false"
        >
          <el-form-item label="发生时间：" prop="year">
            <el-date-picker
              :disabled="isdisabledFn"
              class="userIntSize"
              v-model="dutyFrom.year"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="请选择时间"
              @change="changeYear"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="名称：" prop="title">
            <el-input
              class="userIntSize"
              v-model="dutyFrom.title"
              clearable
              placeholder="请输入名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="提供单位：" prop="sourceId">
            <el-select
              class="userIntSize"
              v-model="dutyFrom.provider"
              clearable
            >
              <el-option
                v-for="item in ProviderList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="重点工作：" prop="taskId">
            <el-cascader
              ref="taskRef"
              class="userIntSize"
              v-model="dutyFrom.taskId"
              :options="tasksList"
              :props="taskProp"
              :show-all-levels="false"
              @change="taskChange"
            >
            </el-cascader>
          </el-form-item>
          <el-form-item label="领导小组：" prop="nsScore">
            <el-input
              class="userIntSize"
              v-model="dutyFrom.leading"
              disabled
            ></el-input>
          </el-form-item>

          <el-form-item label="责任单位：">
            <el-cascader
              class="userIntSize"
              v-model="dutyFrom.dtId"
              :options="deptTypeListOne"
              :props="departmentProp"
              :show-all-levels="false"
              @change="typeChangeDep"
              ref="targetref"
            >
            </el-cascader>
          </el-form-item>

          <el-form-item label="来源：" prop="sourceId">
            <el-select
              class="userIntSize"
              v-model="dutyFrom.sourceId"
              @change="sourChange"
              clearable
            >
              <el-option
                v-for="item in sourceList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="扣分值：" prop="nsScore">
            <el-input
              class="userIntSize"
              v-model="dutyFrom.nsScore"
              :disabled="dutyFrom.sourceId != 15"
            ></el-input>
          </el-form-item>
          <el-form-item label="描述：" prop="description">
            <el-input
              class="userIntSize"
              v-model="dutyFrom.description"
            ></el-input>
          </el-form-item>
          <el-form-item label="附件：" prop="file" class="boxCount">
            <el-upload
              class="upload-demo"
              :action="uploadUrl"
              :on-success="successFile"
              :on-remove="handleDealFileRemove"
              :file-list="fileList"
              multiple
              ref="rebateUpload"
            >
              <el-button size="small" type="success">上传附件</el-button>
            </el-upload>
          </el-form-item>
          <!-- <el-form-item label="附件：" prop="file" class="boxCount">
            <div class="selectList">
              <el-select v-model="dutyFrom.fileStr" @change='fileSelsct' clearable placeholder="请选择文件类型">
                <el-option
                  v-for="item in fileStrList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-select v-model="dutyFrom.file" clearable placeholder="请选择文件">
                <el-option
                  v-for="item in filedata"
                  :key="item.id"
                  :label="fileLists(item.file)"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </el-form-item> -->
          <el-form-item>
            <el-button class="saveBtn" type="primary" @click="submitForm"
              >保存</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog
        width="650px"
        title="附件列表"
        :visible.sync="dialogForm"
        :close-on-click-modal="false"
        @closed="closeDialogs"
      >
        <el-table
          :data="fileTableData"
          border
          style="width: 100%;"
          height="500"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        >
          <el-table-column label="附件">
            <template slot-scope="scope">
              <a :href="returnFile(scope.row.file)">{{ scope.row.file }}</a>
            </template>
          </el-table-column>
          <el-table-column
            prop="fileAddTime"
            label="上传时间"
          ></el-table-column>

          <el-table-column prop="userName" label="上传人"></el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="deleteFile(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
      
    </el-card>
  </div>
</template>

<script>
import configJson from "../../api/config";
export default {
  data() {
    return {
      tableData: [],
      pageSize: 10,
      currentPage: 1,
      total: 0,
      // 弹框显示隐藏
      dialogFormVisible: false,
      // 表单数据
      dutyFrom: {
        year: "",
        quarter: "",
        title: "",
        taskId: "",
        subtasksId: "",
        departmentId: "",
        dtId: "",
        sourceId: "",
        nsScore: "",
        description: "",
        id: "",
        files: [],
        fileStr: "",
        leading: "",
        Provider: ""
      },
      searchVo: {
        year: "2020",
        quarter: "",
        departmentId: "",
        dtId: "",
        taskId: ""
      },
      // 列表
      departmentList: [],
      detype: [],
      sourceList: [],
      ProviderList: [
        {
          id: 1,
          name: "市纪委监委"
        },
        {
          id: 2,
          name: "市委督查室"
        },
        {
          id: 3,
          name: "市委宣传部"
        }
      ],
      departmentTypeList: [],
      deptTypeList: [],
      deptTypeListOne: [],
      deptList: [],
      tasksList: [],
      taskProp: {
        label: "name",
        value: "id",
        children: "children"
      },
      targetProp: {
        label: "deptName",
        value: "id",
        children: "departments"
      },
      targetList: [],
      quarterList: [
        { id: 1, name: "1月" },
        { id: 2, name: "2月" },
        { id: 3, name: "3月" },
        { id: 4, name: "4月" },
        { id: 5, name: "5月" },
        { id: 6, name: "6月" },
        { id: 7, name: "7月" },
        { id: 8, name: "8月" },
        { id: 9, name: "9月" },
        { id: 10, name: "10月" },
        { id: 11, name: "11月" },
        { id: 12, name: "12月" }
      ],
      // 选择附件
      uploadUrl: configJson.API_URL + "fileController/uploadFile",
      // uploadUrl:configJson.API_URL+'fileController',
      fileName: "",
      fileUrlEnd: "",
      fileList: [],
      isdisabledFn: false,
      fileStrList: [],
      filedata: [],
      dialogForm: false,
      fileTableData: [],
      fileStr: "",
      departmentProp: {
        label: "name",
        value: "id",
        children: "departments"
      }
    };
  },
  mounted() {
    this.getTabList();
    this.getsourceList();
    this.getfileList();
    this.gettasksList();
    this.getdepartmentTypeList();
    this.getdepartmentTypeListOne();
  },
  methods: {
    changeFamily1(val) {
      if (val) {
        this.searchVo.departmentId = this.$refs[
          "departmenref"
        ].getCheckedNodes()[0].value;
      }
    },
    showfilesData(data) {
      console.log(data, "查看");
      this.dialogForm = true;
      this.fileTableData = data.filess;
      this.fileStr = data.id;
    },
    returnFile(val) {
      return `${configJson.API_URL}/fileController/${val}`;
    },
    deleteFile(val) {
      console.log(val);
      this.$axios
        .post(`/fileController/deleteFileLib`, { id: val.id }, 2)
        .then(res => {
          if (res.code == 200) {
            console.log(res);
            this.$message({
              message: "数据更新成功",
              type: "success"
            });
            this.getTabList();
            setTimeout(() => {
              this.tableData.forEach(item => {
                if (item.id == this.fileStr) {
                  this.fileTableData = item.filess;
                }
              });
            }, 1000);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 搜索
    fileSelsct(val) {
      this.$axios
        .post("/fileController/getList", { type: val }, 2)
        .then(res => {
          if (res.code == 200) {
            console.log(res.data);
            this.filedata = res.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    fileLists(arr) {
      let str = arr.split("/");
      return str.pop();
    },
    search() {
      this.getTabList();
    },
    // 重置
    reset() {
      this.searchVo = {
        year: "",
        quarter: "",
        departmentId: "",
        dtId: "",
        taskId: ""
      };
      this.getTabList();
    },
    searChangeYear(val) {
      let dateString = val.toLocaleDateString();
      this.searchVo.year = dateString.substring(0, 4);
    },
    getTabList() {
      console.log(this.searchVo.taskId);
      let _val = this.searchVo.taskId;
      let _id = "";
      console.log(_val);
      if (!Array.isArray(_val)) {
        _val = [_val];
      }
      _id = _val[_val.length - 1];

      let obj = {
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        year: Number(this.searchVo.year),
        quarter: this.searchVo.quarter,
        departmentId: this.searchVo.departmentId,
        taskId: _id
      };
      this.$axios
        .post("negativeChecklist/getChecklist", obj, 2)
        .then(res => {
          if (res.code == 200) {
            this.tableData = res.data.list;
            this.total = res.data.total;
          }
        })
        .catch(err => {});
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getTabList();
    },
    // 部门类型
    getdepartmentTypeListOne() {
      this.$axios
        .post("/dept/getDepartmentTypeList")
        .then(res => {
          if (res.code == 200) {
            console.log(res.data);
            res.data.splice(4, 1);
            let arr = res.data;
            let x = 3,
              y = 4;
            arr.splice(x - 1, 1, ...arr.splice(y - 1, 1, arr[x - 1]));
            this.deptTypeListOne = arr;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getdepartmentTypeList() {
      this.$axios
        .post("dept/getDepartmentTypeList")
        .then(res => {
          if (res.code == 200) {
            console.log(res.data);
            res.data.splice(4, 1);
            let arr = res.data;
            let x = 3,
              y = 4;
            arr.splice(x - 1, 1, ...arr.splice(y - 1, 1, arr[x - 1]));
            this.deptTypeList = arr;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 重点任务列表
    gettasksList() {
      this.$axios
        .post("task/getList")
        .then(res => {
          if (res.code == 200) {
            res.data.map(item => {
              if (item.children.length == 0) {
                item.children = undefined;
              }
              this.tasksList = res.data;
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    taskChange(val) {
      if (val) {
        // this.dutyFrom.taskId = this.$refs["taskRef"].getCheckedNodes()[0].value;
        let _val = val;
        console.log(_val);
        if (!Array.isArray(_val)) {
          _val = [_val];
        }

        let _id = _val[_val.length - 1];
        console.log(_id, 66666666666);
        this.tasksList.forEach((item, index) => {
          if (item.id == _id) {
            this.dutyFrom.leading = item.departmentName;
          }
          if (item.children != null || item.children != undefined) {
            if (item.children.length != 0) {
              item.children.forEach(i => {
                if (i.id == _id) {
                  this.dutyFrom.leading = i.departmentName;
                }
              });
            }
          }
        });
        this.$axios
          .post("/deptTask/getDeptByTaskId", { taskId: _id })
          .then(res => {
            if (res.code == 200) {
              this.departmentTypeList = res.data;
              console.log("1111", this.departmentTypeList);
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    deptTypeChange(val) {
      this.getdepartmentList(val);
    },
    // 部门列表
    getdepartmentList(val) {
      this.$axios
        .post("dept/getAllDepartmentTypeId", { id: val }, 2)
        .then(res => {
          if (res.code == 200) {
            this.deptList = res.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 来源
    getsourceList() {
      this.$axios
        .post("negativeSource/getAllSource?id=" + 1)
        .then(res => {
          if (res.code == 200) {
            this.sourceList = res.data;
            console.log(this.sourceList);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 文件列表
    getfileList() {
      this.$axios
        .post("/fileLibTypeController/getList")
        .then(res => {
          if (res.code == 200) {
            this.fileStrList = res.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 选择来源获取扣分值
    sourChange(val) {
      for (let i = 0; i < this.sourceList.length; i++) {
        if (this.sourceList[i].id == val) {
          this.dutyFrom.nsScore = this.sourceList[i].score;
        }
      }
      console.log(this.dutyFrom.sourceId);
    },
    typeChangeDep(val) {
      if (val) {
        this.dutyFrom.dtId = this.$refs["targetref"].getCheckedNodes()[0].value;
      }
      let arr = [];
      for (let i = 0; i < this.detype.length; i++) {
        let obj = {};
        if (val == this.detype[i].departmentTypeId) {
          obj["departmentName"] = this.detype[i].departmentName;
          obj["departmentId"] = this.detype[i].departmentId;
          arr.push(obj);
        }
        this.departmentList = arr;
      }
    },
    // 添加权限
    addPermiss() {
      let day2 = new Date();
      day2.setTime(day2.getTime());
      let s2 =
        day2.getFullYear() + "-" + (day2.getMonth() + 1) + "-" + day2.getDate();
      this.dutyFrom.year = s2;
      this.dialogFormVisible = true;
      this.departmentList = [];
      this.isdisabledFn = false;
    },
    // 编辑
    editPermiss(row) {
      console.log(row);
      this.isdisabledFn = true;
      this.$axios
        .post("/negativeChecklist/getAllChecklistId", { id: row.id }, 2)
        .then(res => {
          if (res.code == 200) {
            setTimeout(() => {
              this.taskChange(res.data.departmentId);
              this.dutyFrom.dtId = res.data.departmentId;
            }, 100);
            this.dutyFrom = res.data;
            this.dutyFrom.year = res.data.occurrenceTime;
            this.dutyFrom.fileStr = row.fileLibType;
            this.dutyFrom.provider = row.provider;
            setTimeout(() => {
              this.fileSelsct(res.data.fileLibType);
            }, 300);
            this.dutyFrom.file = Number(row.file);
            for (let i = 0; i < this.sourceList.length; i++) {
              if (this.sourceList[i].id == res.data.sourceId) {
                this.dutyFrom.nsScore = this.sourceList[i].score;
              }
            }
            if (res.data.file) {
              this.fileName = res.data.file;
              let fileStr = res.data.file.split("/");
              this.dutyFrom.file = this.fileUrlEnd + "/" + fileStr;
              this.fileList = [{ name: fileStr[fileStr.length - 1] }];
            }
            this.dutyFrom.nsScore = res.data.score;
            this.dutyFrom.leading = res.data.departmentName;

            // this.tasksList.forEach((item,index) => {
            //   if( item.departments == null ||  item.departments.length == 0 ){
            //     if(item.id == res.data.taskId){
            //       cosnole.log(item.id,4444)
            //     }
            //   }else{
            //   }
            // });
            this.dutyFrom.taskId = res.data.taskId;
            console.log(this.dutyFrom.taskId);
            // console.log( this.dutyFrom.taskId)
          }
        })
        .catch(err => {
          console.log(err);
        });
      this.dialogFormVisible = true;
    },
    // 删除权限
    removePermiss(row) {
      this.$confirm("确认删除？")
        .then(_ => {
          this.$axios
            .post("negativeChecklist/DeleteChecklist", { id: row.id }, 2)
            .then(res => {
              if (res.code == 200) {
                this.$message({
                  message: "删除成功",
                  type: "success"
                });
                this.getTabList();
              }
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(_ => {});
    },
    // 新增权限
    addPerFun(data) {
      console.log(data)

      this.$axios
        .post("negativeChecklist/addChecklist", data)
        .then(res => {
          if (res.code == 200) {
            this.$message({
              message: "添加成功",
              type: "success"
            });
            this.getTabList();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 修改权限
    updataPer(data) {
      this.$axios
        .post("negativeChecklist/updateChecklist", data)
        .then(res => {
          if (res.code == 200) {
            this.$message({
              message: "修改成功",
              type: "success"
            });
            this.getTabList();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 保存
    submitForm() {
      this.dutyFrom.files = this.fileList.map((o, i) => {
        return o.response.data;
      }); //获取上传文件名
      let _taskId = JSON.parse(JSON.stringify(this.dutyFrom.taskId));
      if (!Array.isArray(_taskId)) {
        _taskId = [_taskId];
      }
      _taskId = _taskId[_taskId.length - 1];
      let obj = {
        // year:Number(this.dutyFrom.year.substring(0,4)),
        // quarter:this.dutyFrom.quarter,
        title: this.dutyFrom.title,
        taskId: _taskId,
        departmentId: this.dutyFrom.dtId,
        // departmentId: this.dutyFrom.departmentId,
        sourceId: this.dutyFrom.sourceId,
        description: this.dutyFrom.description,
        files: this.dutyFrom.files,
        fileLibType: 3,
        score: this.dutyFrom.nsScore,
        provider: this.dutyFrom.provider
        // subtasksId: this.dutyFrom.subtasksId,
      };
      if (this.dutyFrom.id) {
        obj.id = this.dutyFrom.id;
        this.updataPer(obj);
      } else {
        (obj.occurrenceTime = this.dutyFrom.year), //时间
          this.addPerFun(obj);
      }
      this.dialogFormVisible = false;
    },
    changeYear(val) {
      this.dutyFrom.year = val.toLocaleDateString();
    },
    successFile(response, file, fileList) {
      if (response.code == 200) {
        let fileUrlStr = this.uploadUrl.split("/");
        let fileRemoveChl = fileUrlStr.slice(0, fileUrlStr.length - 1);
        this.fileUrlEnd = fileRemoveChl.join("/");
        this.fileName = this.fileUrlEnd + "/" + response.data;
        this.fileList = fileList;
      }
    },
    handleDealFileRemove(file, fileList) {
      this.fileName = "";
    },
    // 关闭弹框
    closeDialog() {
      this.dutyFrom = {
        year: "",
        quarter: "",
        title: "",
        taskId: "",
        subtasksId: "",
        departmentId: "",
        dtId: "",
        sourceId: "",
        nsScore: "",
        description: "",
        id: "",
        files: [],
        fileStr: "",
        Provider: ""
      };
      this.departmentList = [];
      this.fileList = [];
      this.fileName = "";
    },
    closeDialogs() {},
    fileStrChange() {}
  }
};
</script>

<style scoped>
.userIntSize {
  width: 80% !important;
}
.saveBtn {
  width: 55%;
  margin-left: 12%;
}
.selectList {
  display: flex;
}
.boxCount {
  width: 84%;
}
</style>
